<template>
	<view class="head">
		<view class="head-left">
			<text class="head-text">{{subject.subjectTypeDesc}}</text>
			<view class="head-textype">{{getChoiceType}}
				<image class="head-img" src="/static/exam/spot.png"></image>
			</view>
		</view>
		<view class="head-right">
			<text class="head-num">{{subject.subjectNum}}/{{subjectSize}}</text>
		</view>
	</view>
</template>

<script>
	import {
		isEmpty
	} from '@/utils/index'
	export default{
		props:{
			subject:{
				type:Object,
				default(){
					return{}
				}
			},
			subjectSize:0,
		},
		computed:{
			isScene() { //是否是情景题
				return !isEmpty(this.subject.subjectParentDesc);
			},
			getChoiceType() {
				if (this.isScene) {
					return '情景题';
				} else {
					if(isEmpty(this.subject.choiceType)){
						return '';
					}else{
						return ({
							"1": "判断题",
							"2": "单选题",
							"3": "多选题",
							"4": "情景题",
							"5": "简答题",
							"6": "论述题",
							"7": "案例分析"
						})[this.subject.choiceType]
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.head {
		position: relative;
		height: 100upx;
		line-height: 100upx;
		margin: 0 20upx;
		font-size: 30upx;

		&-left {
			position: absolute;
			width: 75%;
			left: 0;
			display: flex;
		}

		&-right {
			position: absolute;
			display: inline-block;
			right: 0;
			vertical-align: middle;
			width: 20%;
			text-align: right;
		}

		&-text {
			width: 30%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			font-size: 30upx;
			color: #5ea1f8;
			font-weight: bold;
			display: inline-block;
		}



		&-textype {
			font-size: 24upx;
			color: #666;
			position: relative;
			padding-left: 36upx;

			.head-img {
				width: 24upx;
				height: 28upx;
				display: inline-block;
				position: absolute;
				top: 36upx;
				left: 0;
			}
		}

		&-i {
			display: inline-block;
			margin-right: 50upx;
		}

		&-ico {
			margin-top: 20upx;
			display: inline-block;
			width: 40upx;
			height: 40upx;
			text-align: center;
			background: #999;
			border-radius: 50%;
			color: #fff;
		}

		&-num {
			display: inline-block;
			color: #5ea1f8;
			font-size: 24upx;
		}
	}
</style>
